<template>
  <div class="edu-header header-store">
    <div class="edu-container">
     <router-link class="logo" to="/index">
       <img src="/src/assets/hotel/images/logo.png"  />
     </router-link>

      <div class="edu-component"></div>

      <ul class="edu-nav">

        <li v-for="item in menuList" class="edu-nav-item" :class="{'edu-active':eduActive==item.activeUrl}">
         <div v-if="item.modelShow&&item.show">
           <div @click="openModleFun(item)">{{item.name}}</div>
         </div>
          <div v-else-if="item.show">
            <router-link :to="item.url">{{item.name}}</router-link>
          </div>
          <div v-else>
            {{userInfo.nickname}}
          </div>
        </li>



      </ul>

    </div>

    <el-dialog v-model="show" title="课程报名" width="750" draggable>
      <div class="row-center" style="margin-top: 20px;user-select: none" >
        <div class="justify-center w-full d-column p-10" style="width: 310px">
          <!--姓名-->
          <el-form-item label="姓名" label-width="100">
            <el-input v-model="entryInfo.realName" maxlength="15" />
          </el-form-item>
          <!--课程等级-->
          <el-form-item label="课程等级" label-width="100">
            <el-select
                v-model="entryInfo.courseId"
                placeholder="Select"
                style="width: 240px"
            >
              <el-option
                  v-for="item in dictStatus2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
              />
            </el-select>
          </el-form-item>
          <!--身份证号-->
          <el-form-item label="身份证号" label-width="100">
            <el-input v-model="entryInfo.sdCard" maxlength="18" minlength="15" />
          </el-form-item>
          <!--文化程度-->
          <el-form-item label="文化程度" label-width="100">
            <el-select
                v-model="entryInfo.culture"
                placeholder="Select"
                style="width: 240px"
            >
              <el-option
                  v-for="item in dictStatus6"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
              />
            </el-select>
          </el-form-item>
          <!--报考专业-->
          <el-form-item label="报考专业" label-width="100">
            <el-input v-model="entryInfo.major" />
          </el-form-item>
          <!--毕业证书-->
          <el-form-item label="毕业证书" label-width="100">
            <el-upload
                class="avatar-uploader"
                :action="uploadPath"
                :show-file-list="false"
                :on-success="certificateImgSuccess"
                :before-upload="beforeAvatarUpload"
            >
              <img v-if="entryInfo.certificateImg" :src="visitPath+entryInfo.certificateImg" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <!--身份证正面-->
          <el-form-item label="身份证正面" label-width="100">
            <el-upload
                class="avatar-uploader"
                :action="uploadPath"
                :show-file-list="false"
                :on-success="beforeIdentityImgSuccess"
                :before-upload="beforeAvatarUpload"
            >
              <img v-if="entryInfo.beforeIdentityImg" :src="visitPath+entryInfo.beforeIdentityImg" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>

        </div>
        <div  class="justify-center w-full d-column p-10" style="width: 310px">
          <!--手机号-->
          <el-form-item label="手机号" label-width="100">
            <el-input v-model="entryInfo.phone" maxlength="11" minlength="11" />
          </el-form-item>
          <!--性别-->
          <el-form-item label="性别" label-width="100">
            <el-select
                v-model="entryInfo.sex"
                placeholder="Select"
                style="width: 240px"
            >
              <el-option
                  v-for="item in dictStatus7"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
              />
            </el-select>
          </el-form-item>
          <!--邮箱-->
          <el-form-item label="邮箱" label-width="100">
            <el-input v-model="entryInfo.email"  type="text"/>
          </el-form-item>
          <!--毕业院校-->
          <el-form-item label="毕业院校" label-width="100">
            <el-input v-model="entryInfo.school" />
          </el-form-item>

          <!--备注信息-->
          <el-form-item label="备注信息" label-width="100">
            <el-input v-model="entryInfo.remark" />
          </el-form-item>
          <!--用户证件照-->
          <el-form-item label="证件照" label-width="100">
            <el-upload
                class="avatar-uploader"
                :action="uploadPath"
                :show-file-list="false"
                :on-success="blueImgSuccess"
                :before-upload="beforeAvatarUpload"
            >
              <img v-if="entryInfo.blueImg" :src="visitPath+entryInfo.blueImg" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <!--身份证反面-->
          <el-form-item label="身份证反面" label-width="100">
            <el-upload
                class="avatar-uploader"
                :action="uploadPath"
                :show-file-list="false"
                :on-success="behindIdentityImgSuccess"
                :before-upload="beforeAvatarUpload"
            >
              <img v-if="entryInfo.behindIdentityImg" :src="visitPath+entryInfo.behindIdentityImg" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>

        </div>
        <div style="width: 30px;"></div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="show = false">取消</el-button>
          <el-button type="primary" @click="onSubmit()">
            报名
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  </template>

  <script setup lang="ts">
  import {onMounted, reactive, ref} from 'vue'
  import {useRoute} from 'vue-router'
  import {postQueryStatus} from "@/api/edu/dictApi";
  import {ElMessage, UploadProps} from "element-plus";
  import {uploadPath, visitPath} from "@/api/edu/fileApi";
  import {isEmpty, msg} from "@/config/Tool";
  import {postAddEntry} from "@/api/edu/entryApi";
  const route = useRoute()
  const token = ref(null);
  const eduActive = ref()
  eduActive.value = route.path
  const menuList = ref([
    {
      id:1,
      name:"首页",
      show:true,
      url:"/index",
      activeUrl:"/index",
      modelShow:false,
    },
    {
      id:2,
      name:"全部课程",
      show:true,
      url:"/edu/list",
      activeUrl:"/edu/list",
      modelShow:false,
    },
    {
      id:3,
      name:"课程报名",
      show:true,
      modelShow:true,
      url: "",
      activeUrl:"",
    },
    {
      id:4,
      name:"个人中心",
      show:true,
      url:"/edu/my",
      activeUrl:"/edu/my",
      modelShow:false,
    },
    {
      id:5,
      name:"登陆/注册",
      show:true,
      url:"/edu/login",
      activeUrl:"/edu/login",
      modelShow:false,
    },
    // {
    //   id:6,
    //   name:"管理后台",
    //   show:true,
    //   url:"/home",
    //   activeUrl:"/home",
    // },
  ])
  const show =ref(false);//
  const dictStatus2=ref([]);//课程等级
  const dictStatus6=ref([]);//文化程度
  const dictStatus7=ref([]);//性别
  const entryInfo=ref({
        userId: "",//用户id
        realName: "",//用户姓名
        phone: "",//手机号
        courseId: "",//
        sex: "",//性别
        sdCard: "",//身份证
        email: "",//邮箱
        checker: "",//
        culture: "",//文化程度
        school: "",//毕业学校
        major: "",//专业
        beforeIdentityImg: "",//身份证正面
        behindIdentityImg: "",//身份证反面
        blueImg: "",//二寸蓝底证件
        certificateImg: "",//学位/毕业证书
        remark: ""
      })
  const userInfo = ref({
    nickname:"",
    memberIcon:"",
  });
  onMounted(()=>{
    postQueryStatusFun();
    // @ts-ignore
    let tokenStr =JSON.parse(localStorage.getItem("memberStore"))?.memberToken;
    // @ts-ignore
    userInfo.value = JSON.parse(localStorage.getItem("memberStore"))?.memberInfo;
    console.log(userInfo.value)
    token.value=tokenStr;
    if(isEmpty(tokenStr)){
      menuList.value[2].show=false;
    }else {
      menuList.value[2].show=true;
      menuList.value[4].show=false;
    }


  })

  /**
   * 展开模态
   * @param item
   */
  function openModleFun(item:any){
    if (token.value!=null&&token.value!=''){
      show.value=true
    }else {
      ElMessage.error('请先登陆账户!')
    }

  }

  /**
   * 查询字典状态
   */
 function postQueryStatusFun(){
    postQueryStatus({"type":"2"}).then(res=>{
      if (res.code===200){
        dictStatus2.value=res.data;
      }
    })
    postQueryStatus({"type":"6"}).then(res=>{
      if (res.code===200){
        dictStatus6.value=res.data;
      }
    })
    postQueryStatus({"type":"7"}).then(res=>{
      if (res.code===200){
        dictStatus7.value=res.data;
      }
    })

  }
  /**
   * 提交表单
   */
  const onSubmit = () => {
   // if (isEmpty(entryInfo.value.userId)){
   //   ElMessage.error("请登陆后重试")
   //   return null;
   // }
    postAddEntryFun(entryInfo.value);
  }


  /**
   * 报名课程
   */
 function postAddEntryFun(e:Object){
    postAddEntry(e).then((res)=>{
      msg(res,'');
      if (res.code===200){
        show.value = false;
      }
    })
  }


  /**
   * 毕业证书成功
   * @param response
   * @param uploadFile
   */
  const certificateImgSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    msg(response,'')
    if (response.code===200){
      entryInfo.value.certificateImg=response.data.fileName;
    }
  };

  /**
   * 证件照上传成功
   * @param response
   * @param uploadFile
   */
  const blueImgSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    msg(response,'')
    if (response.code===200){
      entryInfo.value.blueImg=response.data.fileName;
    }
  };

  /**
   * 身份证正面上传成功
   * @param response
   * @param uploadFile
   */
  const beforeIdentityImgSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    msg(response,'')
    if (response.code===200){
      entryInfo.value.beforeIdentityImg=response.data.fileName;
    }
  };

  /**
   * 身份证反面上传成功
   * @param response
   * @param uploadFile
   */
  const behindIdentityImgSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    msg(response,'')
    if (response.code===200){
      entryInfo.value.behindIdentityImg=response.data.fileName;
    }
  };



  /**
   * 图片上传之前校验类型
   * @param rawFile
   */
  const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
      ElMessage.error('Avatar picture must be JPG format!')
      return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
      ElMessage.error('Avatar picture size can not exceed 2MB!')
      return false
    }
    return true
  }



  </script>

  <style scoped>

  .avatar-uploader .avatar {
    width: 50px;
    height: 50px;
    display: block;
  }
  </style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
}






  .edu-header {
    height: 59px;
    border-bottom: 1px solid #404553;
    background-color: #2b76c1;
    z-index: 1000;
    position: relative;
  }

  .edu-container {
    padding: 0;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .edu-container .logo {
    left: 15px;
    position: absolute;
    top: 16px;
  }

  .edu-container .logo img {
    width: 82px;
    height: 31px;
    border: none;
  }

  .edu-container .edu-nav {
    right: 15px;
    position: absolute;
    top: 0;
    padding: 0;
    background: none;
    color: #fff;
    border-radius: 2px;
    box-sizing: border-box;
  }
  .edu-nav .edu-nav-item {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 60px;
    margin: 0 20px;
  }
  .edu-nav * {
    font-size: 14px;
  }

  .edu-nav .edu-nav-item a {
    display: block;
    padding: 0 20px;
    color: #fff;
    transition: all .3s;
    -webkit-transition: all .3s;
  }

  .edu-active {
    color: #fff!important;
  }

  .edu-nav .edu-nav-item a:hover,.edu-nav .edu-active a {
    color: #fff;
  }
  .edu-nav .edu-active:after {
    top: auto;
    bottom: 0;
    width: 100%;
    position: absolute;
    left: 0;
    height: 5px;
    background-color: #5FB878;
    transition: all .2s;
    -webkit-transition: all .2s;
  }
  </style>
